import React, {useEffect} from 'react';
import {
    Box,
    Card,
    CardContent,
    CardHeader,
    Checkbox,
    Paper, Stack,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TableRow, Typography
} from "@mui/material";

import {unconfirmed, confirm as confirmLesson} from "../../api/lesson/lesson-schedule";
import CircularProgress from "@mui/material/CircularProgress";
import {confirm} from "../common/confirm";
import {alert} from "../common/alert";
import LoadingButton from "@mui/lab/LoadingButton";
import {Done} from "@mui/icons-material";

function LessonConfirmed() {

    const [loading, setLoading] = React.useState(false);
    const [schedules, setSchedules] = React.useState([]);

    const [selectAll, setSelectAll] = React.useState(false);
    const [selectSome, setSelectSome] = React.useState(false);
    const [selected, setSelected] = React.useState([]);
    const [submitting, setSubmitting] = React.useState(false);

    useEffect(() => {
        loadUnconfirmed();
    }, []);

    const loadUnconfirmed = () => {
        setLoading(true);
        unconfirmed().then(data => {
            setSchedules(data);
            setLoading(false);
        });
    }

    function headOnChange(event) {
        const {checked} = event.target;
        setSelectAll(checked);
        setSelectSome(false);
        setSelected(checked ? schedules.map(s => s.id) : []);
    }

    function lineOnChange(event, e) {
        const {checked} = event.target;
        const newSelected = checked ? [...selected, e.id] : selected.filter(id => id !== e.id);
        setSelected(newSelected);
        setSelectAll(newSelected.length === schedules.length);
        setSelectSome(newSelected.length > 0 && newSelected.length < schedules.length);
    }


    function handleSubmit(event) {
        event.preventDefault();
        confirm("请确认是否要销课？销课以后，课程表里将显示为已完成状态。").then(choice => {
            if (choice) {
                setSubmitting(true);
                return confirmLesson(selected);
            } else {
                return Promise.resolve(false);
            }
        }).then(data => {
            setSubmitting(false);
            if (data) {
                alert("销课成功");
                setSelectAll(false);
                setSelectSome(false);
                setSelected([]);
                loadUnconfirmed();
            }
        });
    }

    return (
        <Box p={4}>
            <Card raised sx={{padding: 2, boxSizing: 'border-box', width: '100%'}}>
                <CardHeader title={
                    <Stack direction="row" alignItems="center" spacing={1}>
                        <Typography variant="h5">销课</Typography>
                        {loading && <CircularProgress color="inherit" size={24}/>}
                    </Stack>
                }/>
                <CardContent>
                    <form onSubmit={handleSubmit}>
                        <TableContainer component={Paper}>
                            <Table>
                                <TableHead>
                                    <TableRow>
                                        <TableCell width="30">
                                            <Checkbox checked={selectAll} indeterminate={selectSome}
                                                      onChange={headOnChange}/>
                                        </TableCell>
                                        <TableCell>班级</TableCell>
                                        <TableCell>课程</TableCell>
                                        <TableCell>学员</TableCell>
                                        <TableCell width="80" align="center">第几课</TableCell>
                                        <TableCell width="140" align="center">授课时间</TableCell>
                                    </TableRow>
                                </TableHead>
                                <TableBody>
                                    {schedules.map(e => (
                                        <TableRow key={e.id}>
                                            <TableCell>
                                                <Checkbox
                                                    checked={selected.includes(e.id)}
                                                    onChange={(event) => lineOnChange(event, e)}/>
                                            </TableCell>
                                            <TableCell>{e.classGroup?.name}</TableCell>
                                            <TableCell>{e.course?.name}</TableCell>
                                            <TableCell>{e.students && e.students.map(s => s.name).join(', ')}</TableCell>
                                            <TableCell align="center">{e.lessonNumber}</TableCell>
                                            <TableCell align="center">{e.lessonTime}</TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        </TableContainer>
                        {schedules.length > 0 && <LoadingButton
                            type="submit"
                            disabled={submitting || selected.length === 0}
                            variant="contained"
                            color="primary"
                            startIcon={<Done/>}
                            sx={{marginTop: "16px"}}
                            loadingIndicator={<CircularProgress color="inherit" size={24}/>}
                            loading={submitting}
                        >提交</LoadingButton>}
                    </form>
                </CardContent>
            </Card>
        </Box>
    );
}

export default LessonConfirmed;
